import moment from "moment";
export const chartOption = {
  title: {
    text: "",
    x: "center",
    y: "top",
    textStyle: {
      color: "#fff",
      fontSize: 20
    },
    top: "10"
  },
  legend: {
    data: ["标准策略", "现货策略"],
    textStyle: {
      color: '#fff'
    },
    right: 0,
    //top: '60',
    itemHeight: 5
  },
  grid: {//设置图表四周留白间距
    top: '18%',
    right: '2%',
    left: '10%',
    bottom: '10%',
  },
  tooltip: {
    // enterable: true,
    trigger: "item",
    show: true,
    // alwaysShowContent: true,
    hideDelay: 100,
    backgroundColor: "rgba(255,255,255,1)", // 背景颜色（此时为默认色）
    borderRadius: 5, // 边框圆角
    textStyle: {
      color: "#000",
    },
    formatter: function (params) {
      const item = params.data.value;
      let ap
      return (
        `开始时间：${item[0]}<br/>结束时间：${item[1]}<br/>充放电功率：${item[2]}`

      );
    },
  },
  xAxis: {
    type: "time",
    splitNumber: 24,
    position: "bottom",
    min: new Date(moment().startOf('day')).getTime(),
    max: new Date(moment().endOf('day')).getTime(),
    axisLabel: {
      color: "#fff",
      formatter: (value) => {
        const hour = moment(value).format("HH")
        return hour
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "rgba(255, 255, 255,0.3)"
      }
    },
    axisLine: {
      show: true
    },
    axisTick: {
      show: true
    }
  },
  yAxis: {
    name: "(KW)",
    splitLine: {
      lineStyle: {
        color: "rgba(255, 255, 255,0.3)"
      }
    },
    axisLabel: {
      color: "#fff",
    }
  },
  series: [
    {
      name: "标准策略",
      type: 'custom',
      renderItem: function (params, api) {
        var yValue = api.value(2);
        var start = api.coord([api.value(0), yValue]);
        var end = api.coord([api.value(1), yValue]);
        var size = api.size([api.value(1) - api.value(0), yValue]);
        var style = api.style();
        var height = api.size([0, 1])[1];
        return {
          type: 'group',
          children: [
            {
              type: 'rect',
              shape: {
                x: start[0],
                y: start[1],
                width: end[0] - start[0],
                height: 5
              },
              style: api.style({
                stroke: api.visual('color'),
                fill: '#409EFF'
              })
            },
            {
              type: 'rect',
              shape: {
                x: start[0],
                y: start[1],
                width: end[0] - start[0],
                height: api.value(2) > 0 ? size[1] : -size[1]
              },
              style: api.style({
                stroke: api.visual('color'),
                fill: 'rgba(64,158,255,0.3)'
              }),
            },
            /* {
              type: 'text',
              position: yValue > 0 ? [(start[0] + end[0]) / 2, start[1] + height * 0.4 - 12] : [(start[0] + end[0]) / 2, start[1] + height * 0.4 + 5], // 调整位置以避免重叠
              style: {
                text: yValue ? String(api.value(2)) : "",
                textAlign: 'center',
                fill: '#409EFF'
              }
            } */
          ]
        }

      },
      encode: {
        x: [0, 1],
        y: 2,
        tooltip: [0, 1, 2],
        itemName: 3
      },
      itemStyle: {
        normal: {
          color: 'rgba(64,158,255,1)',
          borderWidth: 0
        },
      },
      data: []
    },
    {
      name: "现货策略",
      type: 'custom',
      renderItem: function (params, api) {

        var yValue = api.value(2);
        var start = api.coord([api.value(0), yValue]);
        var end = api.coord([api.value(1), yValue]);
        var size = api.size([api.value(1) - api.value(0), yValue]);
        var style = api.style();
        var height = api.size([0, 1])[1];
        return {
          type: 'group',
          children: [
            {
              type: 'rect',
              shape: {
                x: start[0],
                y: start[1],
                width: end[0] - start[0],
                height: 5
              },
              style: api.style({
                stroke: api.visual('color'),
                fill: '#61ddaa'
              })
            },
            {
              type: 'rect',
              shape: {
                x: start[0],
                y: start[1],
                width: end[0] - start[0],
                height: api.value(2) > 0 ? size[1] : -size[1]
              },
              style: api.style({
                stroke: api.visual('color'),
                fill: 'rgba(97,221,170,0.2)'
              })
            },
            /* {
              type: 'text',
              position: yValue > 0 ? [(start[0] + end[0]) / 2, start[1] + height * 0.4 - 12] : [(start[0] + end[0]) / 2, start[1] + height * 0.4 + 5], // 调整位置以避免重叠
              style: {
                text: yValue ? String(api.value(2)) : "",
                textAlign: 'center',
                fill: '#61ddaa'
              }
            } */
          ]
        }

        /* return {
          type: 'rect',
          shape: {
            x: start[0],
            y: start[1],
            width: end[0] - start[0],
            height: 5
          },
          style: style
        }; */
      },
      encode: {
        x: [0, 1],
        y: 2,
        tooltip: [0, 1, 2],
        itemName: 3
      },

      itemStyle: {
        normal: {
          color: 'rgba(97,221,170,1)',
          borderWidth: 0
        },
      },
      data: []
    }
  ]
};